<template>
  <div class="counter-container" @click="handleClickOutside">
    <div class="left">
      <div class="left-headr">
        <div class="left-headr-form">
          <div>
            <DiscountForm ref="discountRef" />
          </div>
          <div style="margin-top: 12px">
            <BuysForm ref="buysRef" />
          </div>
        </div>
        <div class="left-headr-function">
          <FunctionBar />
        </div>
      </div>
      <div class="left-content">
        <TabbleList />
      </div>
    </div>
    <div class="right">
      <div class="right-content"><History /></div>
      <div class="right-content"><Refunds /></div>
      <div class="right-content"><TableCapture /></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import DiscountForm from './components/DiscountForm.vue'
import BuysForm from './components/BuysForm.vue'
import FunctionBar from './components/functionBar.vue'
import TabbleList from './components/tableList.vue'
import History from './components/History.vue'
import Refunds from './components/Refund.vue'
import TableCapture from './components/TableCapture.vue'

import { tableDataStoreHook } from '@store/dataStore'

const tableDataStore = tableDataStoreHook()

const handleClickOutside = () => {
  tableDataStore.handleClickOutside()
}
</script>

<style lang="scss" scoped>
.counter-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  .left {
    width: 80%;
    margin-top: 10px;
    margin-right: 10px;
    .left-headr {
      display: flex;
      justify-content: space-between;
      .left-headr-form {
        width: 88%;
        background: #f8f9fa;
        // border-radius: 8px;
        border: 1px solid #ccc;
      }
      .left-headr-function {
        width: 10%;
        border: 1px solid #ccc;
      }
    }
  }
  .right {
    width: 20%;
    margin-top: 10px;
  }
}
</style>
